<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的细节</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <table>
				<tbody>
					<row></row>
					<row></row>
					<tr is="row">
						</row>
				</tbody>
			</table> -->

			<!-- <div ref='hello' @click="handleClick">
				hello
			</div> -->
			<counter ref="one" @change="handleChange"></counter>
			<counter ref="two" @change="handleChange"></counter>
			<div>{{total}}</div>
		</div>
		<script type="text/javascript">
			/* 组件里的data必须是函数fuction*/
			/* Vue.component('row',{			
			data: function() {
					return {
						content: "this is a row"
					}
				},
				template: '<tr><td>{{content}}</td></tr>'
			}) */
			
			Vue.component('counter',{
				template: '<div @click="handle">{{number}}</div>',
				data:function(){
					return {
						number : 0
					}
				},
				methods:{
					handle:function(){
						this.number ++;
						this.$emit('change')
					}
				}
			})
			var vm = new Vue({
				el: '#app',
				/* methods: {
					handleClick: function() {
						alert(this.ref.hello.innerHTML);
					}
				} */
				data:{
					total : 0
				},
				methods:{
					handleChange:function(){
						this.total = this.$refs.one.number + this.$refs.two.number;
					}
				}
			});
		</script>
	</body>
</html>
